<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <link href="/static/traveling/css/jquery.onebyone.css" rel="stylesheet" type="text/css">
    <link href="/static/traveling/css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/static/traveling/css/animate.css">
    <title>Un Aventon.com</title>
    <link rel="stylesheet" href="/static/traveling/js/themes/base/jquery.ui.all.css">
    <script src="/static/traveling/js/jquery-1.7.1.js"></script>
    <script src="/static/traveling/js/ui/jquery.ui.core.js"></script>
    <script src="/static/traveling/js/ui/jquery.ui.widget.js"></script>
    <script src="/static/traveling/js/ui/jquery.ui.position.js"></script>
    <script src="/static/traveling/js/ui/jquery.ui.autocomplete.js"></script>
    <script src="/static/traveling/js/ui/jquery.ui.datepicker.js"></script>
    <script>
        var fecha = "";
        var des = "";
        var hast = "";
        $(function () {
            $("#fecha").datepicker({ altFormat:"dd-mm-yy",
                onSelect:function (date) {
                    $("#fecha").attr('value', date);
                    fecha = $("#fecha").val();
                } });

        });

        $(function () {
            var projects = [
                {% for b in barrios %}
                    {
                        value:"{{ b.id }}",
                        label:"{{ b }}"

                    },
                {% endfor %}
                {
                    value:"",
                    label:""

                }
            ];

            $("#desde").autocomplete({
                minLength:0,
                source:projects,
                focus:function (event, ui) {
                    $("#desde").val(ui.item.label);
                    return false;
                },
                select:function (event, ui) {
                    $("#desde").val(ui.item.label);
                    des = ui.item.label;
                    $("#desde").attr("id", ui.item.value);
                    var url = $("#contact_form").attr("action");
                    $("#contact_form").attr("action", url + "" + ui.item.value + "/");

                    return false;
                }
            })
                    .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>" + item.label + "<br>" + "</a>")
                        .appendTo(ul);
            };

            $("#hasta").autocomplete({
                minLength:0,
                source:projects,
                focus:function (event, ui) {
                    $("#hasta").val(ui.item.label);
                    return false;
                },
                select:function (event, ui) {
                    $("#hasta").val(ui.item.label);
                    hast = ui.item.label;
                    $("#hasta").attr("id", ui.item.value);
                    var url = $("#contact_form").attr("action");
                    $("#contact_form").attr("action", url + "" + ui.item.value + "/");
                    return false;
                }
            })
                    .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>" + item.label + "<br>" + "</a>")
                        .appendTo(ul);
            };
        });

        $(document).ready(function () {
            $("#btnbuscar").click(function () {
                var b = "";
                $("#checkBox").attr("checked");
                if ($("#tipo").is(":checked")) {
                    b = "oferta"
                } else {
                    b = "demanda"
                }
                var a = $("#desde").attr("id");
                var d = $("#hasta").attr("id");
                if (a != "desde" && d != "hasta" && fecha != "") {
                    var c = $("#contact_form").attr("action");
                    $(location).attr("href", "http://www.unaventon.com/traveling/buscar/" + c + fecha + "/" + b)
                } else {
                    alert("Ingrese la Ruta de Origen y Destino")
                }
            })
        });


    </script>


</head>
<body>

<!-- wrapper -->
<div class="wrapper">
    <!-- header_block -->
    <div class="header_block">
        <div class="head_orange"></div>
        <!-- header -->
        <div id="header">
            <div id="logo"><a href="/traveling/inicio/"><img src="/static/traveling/images/logo-web.png"
                                                             style="height: 120px"/></a></div>
            <div class="top_fright">

                <div class="clear"></div>
                <!-- menu -->
                <div id="menu">
                    <ul class="sf-menu">
                        <li class="current"><a href="/traveling/inicio/">Inicio</a></li>
                        {% if not user %}
                            <li><a href="/traveling/ingresar/">Ingresar</a></li>
                            <li><a href="/traveling/registro/">Registrarse</a></li>
                        {% else %}
                            <li><a href="/traveling/perfil/">{{ user }}</a></li>
                            <li><a href="/traveling/salir/">Salir</a></li>
                        {% endif %}
                    </ul>
                </div>
                <!-- //menu -->

            </div>
            <div class="clear"></div>
        </div>
        <!-- //header -->

    </div>
    <!-- //header_block -->


    <!-- container_wrap -->
    <div class="container_wrap">

        <div class="container_wrap_in">

            <div style="width:1000px; margin:auto; padding-top:25px;">
                <h4>Buscar Aventon</h4>

                <form id="contact_form" method="post" action="">
                    <span>Desde: </span><input class="textfield" type="text" name="desde" id="desde" value=""
                                               style=" width:250px;"/>
                    <span>Hasta:</span><input class="textfield" type="text" name="hasta" id="hasta" value=""
                                              style=" width:250px;"/></br></br>
                    <span>Fecha:</span><input class="textfield" type="text" name="fecha" id="fecha" value=""
                                              style=" width:250px;"/>
                    <input id="tipo" type="checkbox" value="Tipo de Viaje">¿Busco Aventon?</input>
                    </br>
                    <a id="btnbuscar" href="#" class="btn small_btn"
                       style="height:35px; width:100px; float:left; margin-right:550px; margin-top:30px">Buscar</a>
                </form>
                {% block content %}
                {% endblock %}
            </div>


            <!-- welcome -->
            <div class="wrap welcome">


            </div>
            <!-- //welcome -->
        </div>
    </div>
    <!-- //container_wrap -->
    <div class="separator"></div>

    <div class="yellow_line"></div>
    <!-- footer -->
    <div id="footer_top">
        <div class="wrap">

            <div class="clear"></div>
        </div>
        <a href="#" id="top"></a>
    </div>
    <div class="footer_separator"></div>
    <div class="wrap">
        <div class="copyright">&copy; 2012 El Aventon.com. Todos los derechos reservados.</div>
        <div class="socials_block">
            <ul>
                <li><a href="#" title="facebook">facebook</a></li>
                <li><a href="#" title="twitter" class="twitter">twitter</a></li>
                <li><a href="#" title="rss" class="rss">rss</a></li>
                <li><a href="#" title="email" class="email">email</a></li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
    <!-- //footer -->
</div>
<!-- // wrapper -->


<script type="text/javascript" src="/static/traveling/js/hoverIntent.js"></script>
<script type="text/javascript" src="/static/traveling/js/superfish.js"></script>
<script type="text/javascript">
    // Superfish Menu Plugin
    jQuery(function () {
        jQuery('ul.sf-menu').superfish();
    });
</script>
<script src="/static/traveling/js/jquery.onebyone.min.js"></script>
<script src="/static/traveling/js/jquery.touchwipe.min.js"></script>
<script src="/static/traveling/js/jquery.easing.1.3.js"></script>
<script src="/static/traveling/js/slides.min.jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#slider').oneByOne({
            className:'oneByOne1',
            easeType:'random',
            slideShow:false
        });

        //testimonials_slides
        $('#testimonials_slides').slides({
            preload:true,
            play:5000,
            pause:2500,
            hoverPause:true
        });

    });
</script>

<script type="text/javascript" src="/static/traveling/js/myscript.js"></script>
<script type="text/javascript" src="/static/traveling/js/jquery.tweet.js"></script>


</body>
</html>